.page {
    border-radius: 0;
    height: 100%;
    // background: url("@/assets/login-bg.webp") no-repeat top center/cover;
    // @supports not (
    //     background: url("@/assets/login-bg.webp") no-repeat top center/cover
    // ) {
    //     background: url("@/assets/login-bg.png") no-repeat top center/cover;
    // }
    background: url("@/assets/login-bg2.png") no-repeat center right/cover;

    .container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -60%);
        display: flex;
        align-items: center;

        .right {
            .logo {
                display: block;
                width: 499px;
                margin: auto;
                margin-bottom: 40px;
            }
            .sub-title {
                color: #303133;
                font-weight: 700;
                text-align: center;
                margin-bottom: 47px;
                font-size: 26px;
            }
            .form-box {
                width: 499px;
                background: #fff;
                padding: 60px 70px;
                border-radius: 16px;
                box-sizing: border-box;
                .title {
                    color: #303133;
                    font-size: 36px;
                    text-align: center;
                    font-weight: 700;
                    margin-bottom: 40px;
                }
            }

            .ant-form {
                :deep(.ant-form-item) {
                    margin-bottom: 16px;
                    .ant-form-item-required {
                        &::before {
                            display: none;
                        }
                        &::after {
                            display: none;
                        }
                    }
                    label {
                        height: 48px;
                    }
                    &.code {
                        height: 48px;
                        .ant-input-affix-wrapper {
                            padding: 0 11px 0 0;
                            border: none;
                            background: #f7f8fa;
                            box-shadow: none;
                            border: 1px solid transparent;
                            &.ant-input-affix-wrapper-focused {
                                border: 1px solid #5077c8;
                                background: #f7f8fa !important;
                                // background: #f00 !important;
                            }
                        }
                        input {
                            background: #f7f8fa !important;
                            box-shadow: none !important;
                            outline: none;
                            border: none;
                            &:focus {
                                border: none;
                            }
                        }
                    }
                    input {
                        height: 48px;
                        font-size: 16px;
                        font-weight: 400;
                        border-radius: 4px;
                        border: 1px solid transparent;
                        padding: 0 20px;
                        box-shadow: none;
                        background: #f7f8fa;
                        &::placeholder {
                            color: #9097a3;
                        }

                        &:focus {
                            background: #f6f9ff !important;
                            border: 1px solid #5077c8;
                        }
                    }
                }
                .code-btn {
                    color: $primary-color;
                    cursor: pointer;
                }
                .submit {
                    width: 359px;
                    height: 48px;
                    background: $primary-color;
                    border-radius: 4px;
                    color: #fff;
                    font-size: 18px;
                    border: none;
                    margin-top: 60px - 16px;
                    position: relative;
                    :deep(span) {
                        position: absolute;
                        z-index: 2;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                    }
                }
                .no-login {
                    height: auto;
                    margin-left: 35px;
                    font-weight: 400;
                    font-size: 14px;
                    label {
                        height: auto;
                    }
                }
            }
        }
    }
    .tips {
        color: #909399;
        font-size: 15px;
        margin-top: 24px;
        text-align: justify;
        width: 100%;
        span {
            color: $primary-color;
            cursor: pointer;
        }
    }
}
